<template>
	<div class="container">
		<h3 style="margin-top: 25px">演示：动态生成试卷</h3>
		<div style="width:600px;margin-top: 15px; font-size:14px;">
			<p style="text-align: center;">
				请先选择试题，然后点击生成试卷按钮进行生成试卷。
			</p>
		</div>
		<el-table :data="tableData" style="width: 595px" border @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="题库编号" width="auto" />
			<el-table-column label="题库名称" width="180">
				<template slot-scope="scope">
					<span>试题</span><span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="button-container">
			<el-button type="primary" style="margin: 0;" @click="generateExamPaper">生成试卷</el-button>
		</div>
	</div>
</template>

<script>
import request from '@/utils/request'
import { POBrowser } from "js-pageoffice";
export default {
	data() {
		return {
			tableData: [],
			selectedQuestions: [] // 用于存储选中的试题 ID
		};
	},
	methods: {
		fetchData() {
			// 获取数据
			request({
				url: '/ExaminationPaper/index',
				method: 'get',
			}).then(response => {
				this.tableData = response;
			}).catch(error => {
				console.error('There has been a problem with your axios operation:', error);
			});
		},
		handleSelectionChange(selection) {
			this.selectedQuestions = selection.map(row => row.id); // 获取选中的试题 ID
		},
		generateExamPaper() {
			// 生成试卷
			let selectedQuestionIds = this.selectedQuestions;
			POBrowser.openWindow("Compose", 'width=1150px;height=900px;', selectedQuestionIds);
		},
		handleEdit(row) {
			POBrowser.openWindow("Word", 'width=1150px;height=900px;', row.id);
		}
	},
	mounted() {
		this.fetchData();
	}
};
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.button-container {
	margin-top: 10px;
}
.add-button {
  margin-left: 0; /* 调整按钮与选择框的间距 */
}
</style>